<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>练习 - 网页时钟</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .clock {
        width: 600px;
        height: 600px;
        background: url(./images/clock.jpg) no-repeat;
        margin: 50px auto 0;
        position: relative;
      }

      .hh,
      .mm,
      .ss {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: url(./images/hour.png) no-repeat center;
      }

      .mm {
        background-image: url(./images/minute.png);
        transform: rotate(0deg);
      }

      .ss {
        background-image: url(./images/second.png);
        transform: rotate(0deg);
      }
      /* .sss {
        transform: rotate(6deg);
      } */
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="hh" id="h"></div>
      <div class="mm" id="m"></div>
      <div class="ss" id="s"></div>
    </div>
    <script>
      /*
        知识点：
          1. 创建日期对象 获取当前时间
          2. 多次定时器，重复获取时间，让指针动起来
      */
      const ss = document.querySelector(".ss")
      let num = 6
      setInterval(() => {
        ss.style.rotate = `${num}deg`
        num += 6
      }, 1000)
      const mm = document.querySelector(".mm")
      let num1 = 1 / 10
      setInterval(() => {
        mm.style.rotate = `${num1}deg`
        num1 += 1 / 10
      }, 1000)
      const hh = document.querySelector(".hh")
      let num2 = 1 / 120
      setInterval(() => {
        h.style.rotate = `${num2}deg`
        num2 += 1 / 120
      }, 1000)
    </script>
  </body>
</html>
